<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加公司</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/personal.css" media="all">-->

    <link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cba/style.css/}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/cba/my.css/}" media="all">
</head>
<body class="childrenBody">
<form class="layui-form html_save" lay-filter="form">
    <input class="layui-input" name="id" id="id" type="hidden">

    <div class="layui-form-item">
        <label class="layui-form-label">字典名称</label>
        <div class="layui-input-block">
            <input class="layui-input" name="name" lay-verify="required" placeholder="请输入字典名称" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字典主键</label>
        <div class="layui-input-block">
            <input class="layui-input" name="code" lay-verify="required" placeholder="请输入字典主键" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字典值</label>
        <div class="layui-input-block">
            <input class="layui-input" name="value" placeholder="请输入字典值" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" checked lay-skin="switch" lay-text="开启|暂停" id="status">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">子项</label>
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" style="margin-top: 6px;" lay-skin="primary" id="dataAdd"
                    type="button">增加
            </button>
        </div>
    </div>

    <div id="data">

    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入备注" class="layui-textarea" name="memo"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveContainer">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script th:src="@{/js/layui/layui.js}"></script>
<script th:src="@{/js/cba/login-timeout.js}"></script>
<!--<script type="text/javascript" src="js/newsadd.js"></script>-->

<script type="text/javascript" th:inline="javascript">
    layui.use(['table', 'form', "layer"], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery;

        var user = [[${dict}]];
        var dataList = [[${dataList}]];
        console.log(dataList);
        if (user != null) {
            form.val("form", {
                "name": user.name
                , "memo": user.memo
                , "code": user.code
                , "value": user.value
                , "id": user.id
            });

            if (user.status == 1) {
                $("#status").removeAttr("checked");
            }
            form.render("checkbox"); //刷新select选择框渲染

            if (dataList != null) {
                for (var i = 0; i < dataList.length; i++) {
                    addData(dataList[i].id, dataList[i].name, dataList[i].code, dataList[i].value, dataList[i].memo, dataList[i].sort);
                }
            }

        }

        form.verify({});

        $("#dataAdd").click(function () {
            addData("", "", "", "", "", 1);
        });


        //监听提交
        form.on('submit(saveContainer)', function (data) {

            data.field.status = data.field.status == "on" ? 0 : 1;

            var arr = [];
            $("#data > div").each(function (i, val) {
                var ins = $(val).find("input");
                var o = {};
                o["pcode"] = data.field.code;
                o["id"] = ins.eq(0).val();
                o["name"] = ins.eq(1).val();
                o["code"] = ins.eq(2).val();
                o["value"] = ins.eq(3).val();
                o["memo"] = ins.eq(4).val();
                o["sort"] = ins.eq(5).val();
                arr.push(o);
            });

            data.field.dataList = JSON.stringify(arr);
            console.log(arr);

            $.ajax({
                url: [[${basePath}]] + "/dict/save", data: data.field, type: "post", success: function (data) {
                    if (data.success) {
                        layer.msg(data.msg, {icon: 1});
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.location.href = [[${basePath}]] + "/dict/index";
                            parent.layer.close(index);
                        }, 1500);
                    } else {
                        layer.msg(data.msg, {icon: 5});
                    }
                }
            });

            return false;
        });


        function addData(id, name, code, value, memo, sort) {
            $("#data").append("<div class='layui-form-item' >" +
                "        <label class=\"layui-form-label\"></label>\n" +
                "        <div class=\"layui-inline\">\n" +
                "            <div class=\"layui-input-inline\"> <input type='hidden' value='" + id + "'> " +
                "                <input type=\"text\" class=\"layui-input\"  lay-verify='required' value='" + name + "' placeholder=\"请输入字典名称\">\n" +
                "            </div>\n" +
                "        <div class=\"layui-inline\">\n" +
                "            <div class=\"layui-input-inline\">\n" +
                "                <input type=\"text\" class=\"layui-input\"  lay-verify='required' value='" + code + "' placeholder=\"请输入字典主键\">\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"layui-inline\">\n" +
                "            <div class=\"layui-input-inline\">\n" +
                "                <input type=\"text\" class=\"layui-input\" value='" + value + "' placeholder=\"请输入字典值\">\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"layui-inline\">\n" +
                "            <div class=\"layui-input-inline\">\n" +
                "                <input type=\"text\" class=\"layui-input\" value='" + memo + "' placeholder=\"请输入备注\">\n" +
                "            </div>" +
                "        </div>\n" +
                "        <div class=\"layui-inline\">\n" +
                "            <div class='layui-input-inline' style='width: 50px;'>" +
                "                <input type=\"text\" value='" + sort + "' class=\"layui-input\" lay-verify='number'  placeholder=\"排序\">\n" +
                "            </div>\n" +
                "        </div>\n" +
                "        <div class=\"layui-inline\">\n" +
                "          <span class='layui-badge pointer delData' title='删除'>-</span>" +
                "        </div>\n" +
                "    </div>");

            //子项删除
            $(".delData ").on("click", function () {
                $(this).parent().parent().parent().remove();
            });
        }

    });
</script>
</body>
</html>